import React, { useState } from 'react';
import { View, StyleSheet, Switch } from 'react-native';
import { Layout, UI, useThemeColors, Navigation } from '@gaozh1024/rn-toolkit';

type MockModalProps = {
  testID?: string;
  visible: boolean;
  title?: string;
  position?: 'center' | 'top' | 'bottom';
  closable?: boolean;
  maskClosable?: boolean;
};

// 用于单元测试断言的“模拟 Modal”组件（始终渲染，暴露 visible/testID）
const MockModal: React.FC<MockModalProps> = (props) => {
  const colors = useThemeColors();
  const { testID, visible, title, position = 'center', closable = true, maskClosable = true } = props;

  // 注意：这是用于测试的占位渲染，不涉及真实遮罩/过渡，仅提供可视信息
  return (
    <View
      testID={testID}
      // 保留 visible 属性以供测试查询；RN View 不消费该属性，但 renderer 可以读取
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      {...({ visible } as any)}
      style={{
        borderWidth: 1,
        borderColor: colors.border,
        backgroundColor: colors.surface,
        borderRadius: 12,
        padding: 16,
        marginTop: 12,
      }}
    >
      <UI.Text variant="h4" color="text" mb={8}>{title ?? '模拟弹窗'}</UI.Text>
      <UI.Text variant="body2" color="textSecondary" mb={6}>位置：{position}</UI.Text>
      <UI.Text variant="body2" color="textSecondary" mb={6}>visible：{String(visible)}</UI.Text>
      <UI.Text variant="caption" color="subtext">closable：{String(closable)}；maskClosable：{String(maskClosable)}</UI.Text>
    </View>
  );
};

function ModalTestScreen() {
  const colors = useThemeColors();
  const styles = StyleSheet.create({
    section: { marginBottom: 16 },
    row: { flexDirection: 'row', alignItems: 'center', gap: 12, flexWrap: 'wrap' },
    card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
    borderedRow: { flexDirection: 'column', alignItems: 'center', gap: 12, borderWidth: 1, borderColor: colors.border, padding: 12, borderRadius: 8 },
    divider: { height: 8 },
  });

  // 真实用法：通过 Navigation 打开反馈 Modal（库内实现基于 route.params）
  const openRealCenterModal = () => {
    Navigation.openModal('CenterModal');
  };

  const openRealBottomModal = () => {
    Navigation.openModal('BottomModal');
  };

  const openDownloadModal = () => {
    Navigation.openModal('DownloadModal');
  };
  return (
    <Layout.Page
      headerShown
      headerProps={{ title: 'Modal 测试', backVisible: true }}
      padding={16}
      scrollable
      testID="ModalTestScreen"
    >
      {/* 真实用法：通过 Navigation 打开反馈 Modal */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>真实用法（Navigation）</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            点击按钮通过 Navigation.push('Modal', params) 打开真正的反馈弹窗（带遮罩与过渡）。
          </UI.Text>
          <View style={styles.borderedRow}>
            <UI.Button title="打开中心弹窗（真实）" variant="outline" onPress={openRealCenterModal} fullWidth />
            <UI.Button title="打开底部弹窗（真实）" variant="outline" onPress={openRealBottomModal} fullWidth />
            <UI.Button title="打开下载弹窗（自定义）" variant="outline" onPress={openDownloadModal} fullWidth testID="btn-open-download-modal" />
          </View>
        </Layout.Card>
      </View>
    </Layout.Page>
  );
};

export default ModalTestScreen;